<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div>
        <el-form-item>
          <template #label>
            <i class="ArticleTitleM">*</i> <span>文章标题 :</span>
          </template>
          <el-input
            v-model="NewArticlesData.ArticleTitle"
            maxlength="12"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <template #label>
            <i class="ArticleTitleM">*</i> <span>文章内容 :</span>
          </template>
          <quill-editor
            ref="text"
            v-model="NewArticlesData.Content"
            class="editor"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="视频地址 :">
          <el-input v-model="NewArticlesData.VideoAddress"></el-input>
        </el-form-item>
        <div slot="footer">
          <div class="dialog-footer">
            <el-button @click="CancelNewlyAdded">取 消</el-button>
            <el-button type="primary" @click="SubmitData">添 加</el-button>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
//  富文本插件接口
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  ['blockquote', 'code-block'], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [
    {
      list: 'ordered'
    },
    { list: 'bullet' }
  ], // 有序、无序列表
  ['link', 'image', 'video'], // 链接、图片、视频
  ['clean'] // 清除文本格式
]

export default {
  name: 'TextEditor',
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      editorOption: {
        placeholder: '请输入文章标题...',
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      NewArticlesData: {
        // 新增技巧数据
        ArticleTitle: '',
        Content: '',
        VideoAddress: ''
      }
    }
  },
  methods: {
    // 取消
    CancelNewlyAdded () {
      this.$emit('CancelNewlyAdded')
    },
    // 确定
    SubmitData () {
      if (this.NewArticlesData.ArticleTitle.length === 0) {
        return this.$message.error('文章标题不可空')
      } else if (this.NewArticlesData.Content.length === 0) {
        return this.$message.error('文章内容不可空')
      }
      this.$emit('ConfirmTheSubmissionArticle', this.NewArticlesData)
      this.NewArticlesData.ArticleTitle = ''
      this.NewArticlesData.Content = ''
      this.NewArticlesData.VideoAddress = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ql-editor {
  height: 200px;
}
.dialog-footer {
  margin-left: 70%;
}
.ArticleTitleM {
  color: red;
}
</style>
